<ngx-toolbar [title]="'ngx-dnd: Drag, Drop and Sorting Library for Angular2 and beyond!'" [subtitle]="'v' + version" class="main-toolbar">
</ngx-toolbar>

<main fxLayout="row nowrap" fxFill>
  <!-- div class="nav-col" fxFlex="20%">
    <h1>
      Ngx-<strong>dnd</strong>
      <small class="version">{{version}}</small>
      <small class="subtitle">Angular2+ DnD</small>
    </h1>
  </div -->
  <div class="field" fxFlex="100%">

    <ngx-section class="shadow" sectionTitle="Sortable - No model">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <div class="ngx-dnd-container" ngxDroppable>
              <div class="ngx-dnd-item" ngxDraggable>Item 1</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 2</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 3</div>
            </div>
          </div>
        </div>
        <div fxFlex="50%">
          <h3>Using Directives</h3>
          <pre><code ngNonBindable><![CDATA[<div class="ngx-dnd-container" ngxDroppable>
  <div class="ngx-dnd-item" ngxDraggable>Item 1</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 2</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 3</div>
</div>]]></code></pre>

          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container [model]="['Item 1', 'Item 2', 'Item 3']">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Sortable - No model - Disabled Item">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <div class="ngx-dnd-container" ngxDroppable>
              <div class="ngx-dnd-item move-disabled" ngxDraggable [moves]="false">Item 1 - Move Disabled</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 2</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 3</div>
            </div>

          </div>
        </div>
        <div fxFlex="50%">
          <h3>Using Directives</h3>
          <pre><code ngNonBindable><![CDATA[<div class="ngx-dnd-container" ngxDroppable>
  <div class="ngx-dnd-item move-disabled" ngxDraggable [moves]="false">Item 1 - Move Disabled</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 2</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 3</div>
</div>]]></code></pre>

          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container [moves]="canMove" [model]="['Item 1 - Move Disabled', 'Item 2', 'Item 3']"></ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Simple Sortable - from array model">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <div class="ngx-dnd-container" ngxDroppable [model]="orderableList">
              <div class="ngx-dnd-item" ngxDraggable *ngFor="let item of orderableList" [model]="item">{{item}}</div>
            </div>
          </div>
        </div>
        <div fxFlex="20%">
          <h3>Model</h3>
          <pre><code>orderableList = {{orderableList | json}}</code></pre>
        </div>
        <div fxFlex="30%">
          <h3>Using Directives</h3>
          <pre><code ngNonBindable><![CDATA[<div class="ngx-dnd-container"
    ngxDroppable [model]="orderableList">
  <div class="ngx-dnd-item"
    ngxDraggable
    *ngFor="let item of orderableList"
    [model]="item">
      {{item}}
    </div>
</div>]]></code></pre>

          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="orderableList">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Simple Sortable - with drag handle">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <div class="ngx-dnd-container" ngxDroppable [model]="orderableList" dropZone="a">
              <div class="ngx-dnd-item has-handle" ngxDraggable *ngFor="let item of orderableList" [model]="item">
                <i class="icon icon-dots-vert" ngxDragHandle></i>
                {{item}}
              </div>
            </div>
          </div>
        </div>
        <div fxFlex="20%">
          <h3>Model</h3>
          <pre><code>orderableList = {{orderableList | json}}</code></pre>
        </div>
        <div fxFlex="30%">
          <h3>Using Directives</h3>
          <pre><code ngNonBindable><![CDATA[<div class="ngx-dnd-container"
    ngxDroppable [model]="orderableList">
  <div class="ngx-dnd-item has-handle"
      ngxDraggable
      *ngFor="let item of orderableList" [model]="item">
    <i class="icon icon-dots-vert" ngxDragHandle></i>
    {{item}}
  </div>
</div>]]></code></pre>

          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="orderableList">
  <ng-template let-model="model">
    <i class="icon icon-dots-vert" ngxDragHandle></i>
    {{model}}
  </ng-template>
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Orderable - With fxLayout">
      <div fxLayout="row nowrap" fxFill>
        <div [fxFlex]="'50%'">
          <div class='wrapper'>

            <div class="ngx-dnd-container" fxLayout="row wrap" ngxDroppable>
              <div fxFlex="1 1 45%" class="ngx-dnd-item" ngxDraggable>Item 1</div>
              <div fxFlex="1 1 45%" class="ngx-dnd-item" ngxDraggable>Item 2</div>
              <div fxFlex="1 1 20%" class="ngx-dnd-item" ngxDraggable>Item 3</div>
              <div fxFlex="1 1 20%" class="ngx-dnd-item" ngxDraggable>Item 4</div>
              <div fxFlex="1 1 20%" class="ngx-dnd-item" ngxDraggable>Item 5</div>
            </div>

          </div>
        </div>
        <div fxFlex="50%">
          <h3>Using Directives</h3>
          <pre><code ngNonBindable><![CDATA[<div class="ngx-dnd-container" fxLayout="row wrap">
  <div fxFlex="45" class="ngx-dnd-item">Item 1</div>
  <div fxFlex="45" class="ngx-dnd-item">Item 2</div>
  <div fxFlex="20" class="ngx-dnd-item">Item 3</div>
  <div fxFlex="20" class="ngx-dnd-item">Item 4</div>
  <div fxFlex="20" class="ngx-dnd-item">Item 5</div>
</div>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Simple Drag-and-Drop - No model">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <div class="ngx-dnd-container" ngxDroppable="example-two">
              <div class="ngx-dnd-item" ngxDraggable>Item 1a</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 2a</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 3a</div>
            </div>
            <div class="ngx-dnd-container" ngxDroppable="example-two">
              <div class="ngx-dnd-item" ngxDraggable>Item 1b</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 2b</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 3b</div>
            </div>
          </div>
        </div>
        <div fxFlex="50%">
          <h3>Using Directives</h3>
          <pre><code ngNonBindable><![CDATA[<div class="ngx-dnd-container" ngxDroppable="example-two">
  <div class="ngx-dnd-item" ngxDraggable>Item 1a</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 2a</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 3a</div>
</div>
<div class="ngx-dnd-container" ngxDroppable="example-two">
  <div class="ngx-dnd-item" ngxDraggable>Item 1b</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 2b</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 3b</div>
</div>]]></code></pre>

          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="['Item 1a', 'Item 2a', 'Item 3a']"
  dropZone="example-two">
</ngx-dnd-container>
<ngx-dnd-container
  [model]="['Item 1b', 'Item 2b', 'Item 3b']"
  dropZone="example-two">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>


    <ngx-section class="shadow" sectionTitle="Restricted Drag-and-Drop - No model">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <div class="ngx-dnd-container" ngxDroppable>
              <div class="ngx-dnd-item" ngxDraggable="['restricted-target']">Item 1a</div>
              <div class="ngx-dnd-item" ngxDraggable="['restricted-target']">Item 2a</div>
              <div class="ngx-dnd-item" ngxDraggable="['restricted-target']">Item 3a</div>
            </div>
            <div class="ngx-dnd-container" ngxDroppable="restricted-target">
              <div class="ngx-dnd-item" ngxDraggable>Item 1b</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 2b</div>
              <div class="ngx-dnd-item" ngxDraggable>Item 3b</div>
            </div>
          </div>
        </div>
        <div fxFlex="50%">
          <h3>Using Directives</h3>
          <pre><code ngNonBindable><![CDATA[<div class="ngx-dnd-container" ngxDroppable>
  <div class="ngx-dnd-item" ngxDraggable="['restricted-target']">Item 1a</div>
  <div class="ngx-dnd-item" ngxDraggable="['restricted-target']">Item 2a</div>
  <div class="ngx-dnd-item" ngxDraggable="['restricted-target']">Item 3a</div>
</div>
<div class="ngx-dnd-container" ngxDroppable="restricted-target">
  <div class="ngx-dnd-item" ngxDraggable>Item 1b</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 2b</div>
  <div class="ngx-dnd-item" ngxDraggable>Item 3b</div>
</div>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Nested Sortable">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <ngx-dnd-container
              [model]="orderableLists">
            </ngx-dnd-container>
          </div>
        </div>
        <div fxFlex="25%">
          <h3>Model</h3>
          <pre><code>orderableLists = {{orderableLists | json}}</code></pre>
        </div>
        <div fxFlex="25%">
          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="orderableLists">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Nested Sortable - containers">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="50%">
          <div class='wrapper'>
            <ngx-dnd-container
              [model]="nestedLists">
            </ngx-dnd-container>
          </div>
        </div>
        <div fxFlex="25%">
          <h3>Model</h3>
          <code><pre>nestedLists = {{nestedLists | json}}</pre></code>
        </div>
        <div fxFlex="25%">
          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="nestedLists">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Restricted Drag-and-Drop - copy and remove on spill">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="25%">
          <h4>Source</h4>
            <ngx-dnd-container
              [model]="sourceItems"
              [copy]="true"
              [dropZones]="['oneway-target']">
            </ngx-dnd-container>
        </div>
        <div fxFlex="25%">
          <h4>Target</h4>
          <ngx-dnd-container
            [model]="targetItems"
            dropZone="oneway-target"
            [removeOnSpill]="true">
          </ngx-dnd-container>
        </div>
        <div fxFlex="25%">
          <h3>Target Model</h3>
          <pre><code>targetItems = {{targetItems | json}}</code></pre>
        </div>
        <div fxFlex="25%">
          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="sourceItems"
  [copy]="true"
  [dropZones]="['oneway-target']">
</ngx-dnd-container>
<ngx-dnd-container
  [model]="targetItems"
  dropZone="oneway-target"
  [removeOnSpill]="true">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Nested Restricted Drag-and-Drop - with remove on spill">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="25%">
          <h4>Source</h4>
          <ngx-dnd-container
            [model]="sourceNestedItems"
            [copy]="true"
            [dropZones]="['nested-oneway-target']">
          </ngx-dnd-container>
        </div>
        <div fxFlex="25%">
          <h4>Target</h4>
          <ngx-dnd-container
            [model]="targetNestedItems"
            dropZone="nested-oneway-target"
            [removeOnSpill]="true">
          </ngx-dnd-container>
        </div>
        <div fxFlex="25%">
          <h3>Target Model</h3>
          <pre><code>targetNestedItems = {{targetNestedItems | json}}</code></pre>
        </div>
        <div fxFlex="25%">
          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="sourceNestedItems"
  [copy]="true"
  [dropZones]="['nested-oneway-target']">
</ngx-dnd-container>
<ngx-dnd-container
  [model]="targetNestedItems"
  dropZone="nested-oneway-target"
  [removeOnSpill]="true">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow" sectionTitle="Restricted Drag-and-Drop - multiple containers">
      <div fxLayout="row nowrap" fxFill>
        <div fxFlex="25%">
          <h4>Source</h4>
            <ngx-dnd-container
              [model]="sourceItems"
              [copy]="true"
              [dropZones]="['multiple-target-a', 'multiple-target-b']">
            </ngx-dnd-container>
        </div>
        <div fxFlex="25%">
          <h4>Target A</h4>
          <ngx-dnd-container
            [model]="targetItemsA"
            dropZone="multiple-target-a"
            [dropZones]="['multiple-target-a', 'multiple-target-b']"
            [removeOnSpill]="true">
          </ngx-dnd-container>
        </div>
        <div fxFlex="25%">
          <h4>Target B</h4>
          <ngx-dnd-container
            [model]="targetItemsB"
            dropZone="multiple-target-b"
            [dropZones]="['multiple-target-a', 'multiple-target-b']"
            [removeOnSpill]="true">
          </ngx-dnd-container>
        </div>
        <div fxFlex="25%">
          <h3>Using Components</h3>
          <pre><code ngNonBindable><![CDATA[<ngx-dnd-container
  [model]="sourceItems"
  [copy]="true"
  [dropZones]="['multiple-target-a', 'multiple-target-b']">
</ngx-dnd-container>
<ngx-dnd-container
  [model]="targetItemsA"
  dropZone="multiple-target-a"
  [removeOnSpill]="true">
</ngx-dnd-container>
<ngx-dnd-container
  [model]="targetItemsB"
  dropZone="multiple-target-b"
  [removeOnSpill]="true">
</ngx-dnd-container>]]></code></pre>
        </div>
      </div>
    </ngx-section>

    <ngx-section class="shadow builder" sectionTitle="Builder Demo">
      <div fxLayout="row nowrap" fxFill>
        <div class="builder-source" fxFlex="20%">
          <h4>Source</h4>

          <ngx-dnd-container
            class="root-container"
            [model]="sourceBuilderTools"
            [dropZones]="['builder-target']"
            [copy]="true"
            [droppableItemClass]="droppableItemClass"
            (drag)="builderDrag($event)">

            <ng-template let-item="model">
              <ngx-icon [fontIcon]="item.icon"></ngx-icon>
              {{item.name}}
            </ng-template>
          </ngx-dnd-container>

        </div>
        <div class="builder-target" fxFlex="60%">
          <h4>Target</h4>

          <ngx-dnd-container
            class="root-container"
            [model]="targetBuilderTools"
            dropZone="builder-target"
            [removeOnSpill]="true"
            [droppableItemClass]="droppableItemClass"
            (drag)="log($event)"
            (drop)="log($event)"
            (over)="log($event)"
            (out)="log($event)"
            (remove)="log($event)">

            <ng-template let-model="model" let-template="template">
              <div [ngSwitch]="model.inputType">
                <div *ngSwitchCase="'section'">
                   <ngx-section class="shadow" [sectionTitle]="model.name">
                     <ngx-dnd-container
                       dropZone="builder-target"
                       [model]="model.children"
                       [removeOnSpill]="true"
                       [template]="template"
                       [droppableItemClass]="droppableItemClass"
                       (drag)="log($event)"
                       (drop)="log($event)"
                       (over)="log($event)"
                       (out)="log($event)"
                       (remove)="log($event)"
                       (cancel)="log($event)">
                     </ngx-dnd-container>
                   </ngx-section>
                </div>
                <div *ngSwitchDefault>
                  <ngx-input
                    [type]="model.inputType"
                    [hint]="model.name"
                    [autofocus]="false"
                    [ngModel]="model.data">
                  </ngx-input>
                </div>
              </div>
            </ng-template>
          </ngx-dnd-container>
        </div>
        <div fxFlex>
          <h3>Model</h3>
          <pre><code>{{targetBuilderTools | json}}</code></pre>
        </div>
      </div>
      <i>View code <a href="https://github.com/swimlane/ngx-dnd/blob/master/demo/app.component.html#L413">here</a></i>
      <br /><i>Open console to see events</i>
    </ngx-section>

  </div>
</main>
